<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0', float: 'left' }">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>营销活动</BreadcrumbItem>
      <BreadcrumbItem>社团订单</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Select style="width: 120px" v-model="query.equal.orderStatus" placeholder="订单状态" clearable @on-change="selectStatus">
            <Option v-for="item in orderStatusArray" :value="item.id" :key="item.id">
              {{ item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem>
          <DatePicker
            v-model="timeScopeModel"
            type="daterange"
            confirm transfer
            placement="bottom-end"
            placeholder="选择订单日期范围"
            @on-ok="datePicker"
            style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
    </Content>
  </div>
</template>
<script scope>
export default {
  data() {
    return {
      timeScopeModel: [],
      dataGrid: [],
      keywords: null,
      query: {
        equal: {
          orderStatus: 1,
        },
      },
      orderStatusArray: this.$dict.orderStatus.data,
      columns: [
        {
          title: '社团名称',
          key: 'srvGroupName',
          minWidth: 250,
        },
        {
          title: '订单数量',
          key: 'orderTotalCount',
          minWidth: 150,
        },
        {
          title: '合计金额',
          key: 'orderTotalAmt',
          minWidth: 150,
        },
        {
          title: '团长名称',
          key: 'holderName',
          minWidth: 120,
        },
        {
          title: '联系电话',
          key: 'holderMobile',
          width: 150,
        },
        {
          title: '统计时间',
          key: 'statsTime',
          width: 150,
          render: (h, params) => {
            return h('div', this.$date(params.row.statsTime, 'yyyy-MM-dd HH:mm'))
          },
        },
      ],
    }
  },
  components: {},
  methods: {
    selectStatus(status) {
      this.query.equal.orderStatus = status
      this.init()
    },
    datePicker() {
      this.query.equal.startDate = this.$date(this.timeScopeModel[0], 'yyyyMMdd')
      this.query.equal.endDate = this.$date(this.timeScopeModel[1], 'yyyyMMdd')
      this.init()
    },
    reset() {
      delete this.query.equal.startDate
      delete this.query.equal.endDate
      this.query.equal.orderStatus = 1
      this.init()
    },
    //获取列表
    init() {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-order',
        url: '/v1.0/stats/mall/order/srv/group/index',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGrid = res.data.data
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).get()
    },
  },
  created() {
    this.init()
  },
}
</script>
<style lang="less" scoped>
.imgs {
  width: 80%;
}
</style>
